<template>
    <ul class="rightbottom_uls">
        <li v-for="(item, index) in tabledata" :key="index">
            <div class="li_left">
                <div class="level_bg" :class="'colorbg' + item.type">
                    {{ getLabel(item) }}
                </div>

                <span>{{ item.title }}</span>
            </div>


            <div>
                <span>{{ item.levelstr }}</span>
            </div>
        </li>
    </ul>
</template>

<script setup>
import { ref, onMounted, reactive, nextTick } from "vue";
import { hhjkdata, typelist } from '../data/dataconfig'
const tabledata = ref(hhjkdata)


const getLabel = (row) => {
    let title = ''
    typelist.forEach((item) => {
        if (item.value === row.type) {
            title = item.label
        }
    })
    return title
}
</script>

<style lang="less" scoped>
.rightbottom_uls {
    margin: 0;
    padding: 0;
    height: calc(100% - 1rem);
    overflow-y: auto;

    li {
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.6rem;
        height: 2.7rem;
        color: #fff;

        .li_left {
            display: flex;
            align-items: center;
        }

        .level_bg {
            width: 4rem;
            height: 2rem;
            margin-right: 0.3rem;
            text-align: center;
            line-height: 2rem;
            border-radius: 3px;
        }
        .colorbg1{
            background: #1EDB17;
        }
        .colorbg2{
            background: #EFDD1A;
        }
         .colorbg3{
            background: #EF9A1A;
        }
         .colorbg4{
            background: #EF1A1A;
        }
    }
}
</style>